import React from 'react';
import { Modal, Tooltip, Row, Col } from 'antd'
import { LwjSowPicList,DescriptionList,Loader } from 'components'
import moment from 'moment'
import lodash from 'lodash'
import { auditStatus } from "utils/enumConfig"
import styles from './List.less'

let colors = {
  'UNSUBMIT': '',
  'PENDING': 'blue',
  'AUDIT_SUCCESS': 'green',
  'AUDIT_FAIL': 'red'
};
const { Description } = DescriptionList;
const DetailModal = ({ visible, item, dispatch, effects }) => {
  const hideDetailModal = (flag, currentItem) => {
    dispatch({
      type: 'distributorList/toggleModal',
      currentItem,
      field: 'detailVisible',
      flag
    })
  }
  return(
    <Modal footer={null} visible={visible} width={800} title={"门店详情"} className={styles.distributorDetailModal} onCancel={() => { hideDetailModal(false, {}) }}>
      <div className={styles.item}>
        <div className={styles.title}>
          <span>统计信息</span>
        </div>
        <Row className={styles.info} gutter={20} style={{width: '300px', margin: '0 auto'}}>
          <Col span={12} align="center">
            <div>发展下级门店</div>
            <div className={styles.num}>{item.directInvited}</div>
          </Col>
          <Col span={12} align="center">
            <div>可提成下级门店</div>
            <div className={styles.num}>{item.totalInvited}</div>
          </Col>
        </Row>
      </div>
      <div className={styles.item}>
        <div className={styles.title}>
          <span>基础信息</span>
        </div>
        <div className={styles.info}>
          <DescriptionList size="small" className={styles.info}>
            <Description term="店铺名称" className={styles.description}><Tooltip placement="bottomLeft" title={item.displayName}>{item.displayName}</Tooltip></Description>
            <Description term="门店名称">{item.name}</Description>
            <Description term="门店编码">{item.code}</Description>
          </DescriptionList>
          <DescriptionList size="small" className={styles.info}>
            <Description term="邀请店铺" className={styles.description}><Tooltip placement="bottomLeft" title={item.invitedBy}>{item.invitedBy}</Tooltip></Description>
            <Description term="入驻时间">{moment(item.createTime).format("YYYY-MM-DD HH:mm:ss")}</Description>
            <Description term="邀请码">{item.invitationCode}</Description>
          </DescriptionList>
          <DescriptionList size="small" className={styles.info}>
            <Description term="门店管理员">{item.distributorSignerName}</Description>
            <Description term="管理员手机号">{item.distributorSignerMobile}</Description>
            <Description term="门店运营">{item.distributorOperator}</Description>
          </DescriptionList>
          <DescriptionList size="small" className={styles.info}>
            <Description term="门店地址" style={{width: '100%'}}>{item.fullAddress}</Description>
          </DescriptionList>
          <div className={styles.picRow}>
            <div>门店照片：</div>
            <div className={styles.pics}>
              {
                item.enterPicArr && item.enterPicArr.map((val, index) => (
                  <div className={styles.pic} key={index}>
                    <LwjSowPicList width='80px' fileLists={val} />
                  </div>
                ))
              }
            </div>
          </div>
        </div>
      </div>
      {
        item.userName || item.userIdentityNum || item.idCardFrontPic || item.idCardBackPic
        ? (<div className={styles.item}>
          <div className={styles.title}>
            <span>实名信息</span>
          </div>
          <div className={styles.info}>
            <DescriptionList size="small" className={styles.info}>
              <Description term="姓名">{item.userName}</Description>
              <Description term="身份证号">{item.userIdentityNum}</Description>
            </DescriptionList>
            <div className={styles.picRow}>
              <div>身份证照片：</div>
              <div className={styles.pics}>
                <div className={styles.pic}>
                  {
                    item.idCardFrontPic
                      ? (<LwjSowPicList width='80px' fileLists={item.idCardFrontPic} />)
                      : null
                  }
                </div>
                <div className={styles.pic}>
                  {
                    item.idCardBackPic
                      ? <LwjSowPicList width='80px' fileLists={item.idCardBackPic} />
                      : null
                  }
                </div>
              </div>
            </div>
          </div>
        </div>)
        : null
      }
      {
        item.enterpriseName || item.registrationNumber || item.businessLicensePic
        ? (<div className={styles.item}>
          <div className={styles.title}>
            <span>营业执照</span>
          </div>
          <div className={styles.info}>
            <DescriptionList size="small" className={styles.info}>
              <Description term="企业名称">{item.enterpriseName}</Description>
              <Description term="统一社会信用编号">{item.registrationNumber}</Description>
            </DescriptionList>
            <div className={styles.picRow}>
              <div>门店照片：</div>
              <div className={styles.pics}>
                <div className={styles.pic}>
                  {
                    item.businessLicensePic
                      ? (<LwjSowPicList width='80px' fileLists={item.businessLicensePic} />)
                      : null
                  }
                </div>
              </div>
            </div>
          </div>
        </div>)
        : null
      }
      <Loader spinning={effects['distributorList/queryDistributorDetail']} />
    </Modal>
  )
}

export default DetailModal;